<template>
  <a-card style="margin-top: 24px">
    <!-- 查询区域 -->
    <div :class="{ search: advanced }">
      <a-form :form="form" layout="horizontal" :labelCol="{ span: 8 }" :wrapperCol="{ span: 15 }">
        <div :class="{ fold: !advanced }">
          <a-row>
            <a-col :md="6" :sm="24">
              <a-form-item label="考核类别">
                <a-select
                  v-decorator="[
                    'inspectionType',
                    { rules: [{ required: true, message: '请选择考核类别' }] },
                  ]"
                >
                  <a-select-option
                    v-for="item in dictList.inspectionType"
                    :key="item.id"
                    :value="item.value"
                  >
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="年份">
                <a-select
                  v-decorator="[
                    'year',
                    {
                      rules: [{ required: true }],
                      initialValue: thisYear,
                      message: '请选择年份',
                    },
                  ]"
                >
                  <a-select-option
                    v-for="(item, index) in [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]"
                    :key="thisYear - index"
                    :value="thisYear - index"
                  >
                    {{ thisYear - index }}年
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="周期">
                <a-select
                  v-decorator="[
                    'inspectionCycle',
                    { rules: [{ required: true }], initialValue: '年' },
                  ]"
                  @change="handleChangeCycle"
                >
                  <a-select-option
                    v-for="item in dictList.inspectionCycle"
                    :key="item.id"
                    :value="item.value"
                  >
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="周期数">
                <a-select
                  v-decorator="[
                    'inspectionCycleNumber',
                    { rules: [{ required: true, message: '请选择周期数' }], initialValue: 1 },
                  ]"
                >
                  <a-select-option
                    v-for="item in cyclesNumber[cyclesing].date"
                    :key="item"
                    :value="item"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-if="advanced">
            <a-col :md="6" :sm="24">
              <a-form-item label="汇总类型">
                <a-select
                  v-decorator="[
                    'type',
                    {
                      initialValue: '1',
                      rules: [{ required: true, message: '汇总类型' }],
                    },
                  ]"
                >
                  <a-select-option value="1" key="1">按支部</a-select-option>
                  <a-select-option value="2" key="2">按部门</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="条例">
                <a-select
                  v-decorator="[
                    'regulationId',
                    { initialValue: '', rules: [{ required: false, message: '条例' }] },
                  ]"
                >
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option
                    v-for="(item, index) in regulationList"
                    :key="index"
                    :value="item.id"
                  >
                    {{ item.regulationName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <span style="float: right; margin-top: 3px;">
          <a-button v-permission="`inspection:summary:list`" type="primary" @click="handleSearch"
            >查询</a-button
          >
          <a-button class="ml-8" @click="handleReset">重置</a-button>

          <a @click="advanced = !advanced" class="ml-8">
            {{ advanced ? '收起' : '展开' }}
            <a-icon :type="advanced ? 'up' : 'down'" />
          </a>
        </span>
      </a-form>
    </div>

    <!-- 表格区域 -->
    <div class="operator">
      <a-button
        v-permission="`inspection:summary:export`"
        class="mr-8 btn-success"
        type="primary"
        @click="handleExport"
      >
        数据导出
      </a-button>
    </div>

    <a-table
      :columns="columns"
      :row-key="item => item.id"
      :data-source="dataSource"
      :loading="loading"
      bordered
    >
      <span slot="action" slot-scope="item">
        <a @click="showEventList(item)">查看事件列表</a>
      </span>
    </a-table>

    <!-- 事件drawer -->
    <a-drawer
      title="事件汇总"
      :width="1000"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="visible = false"
    >
      <a-table :columns="columnsEvent" :row-key="item => item.id" :data-source="eventList" bordered>
      </a-table>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="visible = false">
          关闭
        </a-button>
      </div>
    </a-drawer>
  </a-card>
</template>

<script>
import { basicService, regulation } from '@/services';
import { BASE } from '@/services/api';

const columns = [
  {
    title: '序号',
    key: 'index',
    customRender: (text, record, index) => `${index + 1}`,
    align: 'center',
    width: 100,
  },
  {
    title: '支部',
    dataIndex: 'inspectionBranchName',
    key: 'inspectionBranchName',
    align: 'center',
  },
  {
    title: '部门',
    dataIndex: 'inspectionDeptNames',
    key: 'inspectionDeptNames',
    align: 'center',
    width: 120,
  },
  {
    title: '考核类型',
    key: 'inspectionTypeName',
    dataIndex: 'inspectionTypeName',
    align: 'center',
  },
  {
    title: '考核分',
    key: 'inspectionScore',
    dataIndex: 'inspectionScore',
    align: 'center',
  },
  {
    title: '事件汇总',
    key: 'eventDOList',
    dataIndex: 'eventDOList',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
];
const columnsEvent = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    align: 'center',
    width: 50,
  },
  {
    title: '被考核支部',
    key: 'inspectBranchName',
    dataIndex: 'inspectBranchName',
    align: 'center',
  },
  {
    title: '发生日期',
    key: 'eventCreateDate',
    dataIndex: 'eventCreateDate',
    align: 'center',
  },
  {
    title: '事件内容',
    key: 'eventContent',
    dataIndex: 'eventContent',
    align: 'center',
  },
  {
    title: '考核说明',
    key: 'inspectDesc',
    dataIndex: 'inspectDesc',
    align: 'center',
  },
  {
    title: '考核分',
    key: 'inspectScore',
    dataIndex: 'inspectScore',
    align: 'center',
  },

  {
    title: '备注',
    key: 'executeDepartment',
    dataIndex: 'executeDepartment',
    align: 'center',
  },
  {
    title: '考核条例',
    key: 'regulationNo',
    dataIndex: 'regulationNo',
    align: 'center',
  },

  {
    title: '条例内容',
    key: 'regulationContent',
    dataIndex: 'regulationContent',
    align: 'center',
  },
  {
    title: '考核类别',
    key: 'inspectionType',
    dataIndex: 'inspectionType',
    align: 'center',
  },
  {
    title: '考核部门',
    key: 'inspectDeptName',
    dataIndex: 'inspectDeptName',
    align: 'center',
  },
  {
    title: '考核日期',
    key: 'eventInspectDate',
    dataIndex: 'eventInspectDate',
    align: 'center',
  },
];
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const formTailLayout = {
  labelCol: { span: 12 },
  wrapperCol: { span: 12, offset: 6 },
};

export default {
  name: 'inspectionSummary',

  data() {
    return {
      BASE,
      thisYear: new Date().getFullYear(),
      columns: columns,
      columnsEvent: columnsEvent,
      cyclesNumber: [
        { date: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
        { date: [1, 2, 3, 4] },
        { date: [1, 2] },
        { date: [1] },
      ],
      cyclesing: 0,
      advanced: true,
      dataSource: [],
      loading: false,
      visible: false,
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'summary' }),
      branchList: [],
      branchListDepartment: [],
      regulationList: [],
      eventList: [],
      basicList: [],
      // rowSelection: {
      //   selectedRowKeys: [],
      //   onChange: selectedRowKeys => (this.rowSelection.selectedRowKeys = selectedRowKeys),
      // },
      // 字典列表
      dictList: {
        inspectionType: [],
        inspectionCycle: [],
      },
    };
  },

  created() {
    this.getDict();
    this.basicQuery();
    this.regulationQuery();
  },

  methods: {
    handleSearch() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          console.log('Received values of form: ', values);
          regulation
            .collectQuery({ ...values })
            .then(res => {
              console.log(res);
              if (res.code === '200') {
                this.dataSource = res.data.items;
              }
            })
            .catch(e => {
              this.$message.error(e);
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },

    handleReset() {
      this.form.resetFields();
    },

    // 批量导出event
    handleExport() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          const token = localStorage.getItem('token');
          let query = '';
          Object.keys(values).forEach(key => {
            if (values[key]) {
              query += `&${key}=${values[key]}`;
            }
          });
          const url = `${BASE}/statistics/export?token=${token}${encodeURI(query)}`;
          console.log(url);
          const link = document.createElement('a');
          link.target = '_blank';
          link.href = url;
          link.click();
        }
      });
    },

    // 按需获取字典
    getDict() {
      const typeList = Object.keys(this.dictList);
      basicService.getDictByFlag({ typeList }).then(res => {
        if (res.code === '200') {
          this.dictList = res.data.typeMap;
        }
      });
    },

    // 获取考核类型
    basicQuery() {
      regulation.basicQuery({}).then(res => {
        console.log(res);
        this.basicList = res.data.items;
      });
    },

    // 获取支部数据
    branchQuery() {
      regulation.branchQuery({ needDetail: true }).then(res => {
        console.log(res);
        this.branchList = res.data.items;
      });
    },

    // 获取条例数据
    regulationQuery() {
      regulation.regulationQuery({}).then(res => {
        console.log(res);
        this.regulationList = res.data.items;
      });
    },

    // 分页切换
    // handleTableChange(pagination) {
    //   this.handleOk();
    // },

    // 查看事件列表
    showEventList(item) {
      this.eventList = item;
      this.visible = true;
    },

    // 切换周期
    handleChangeCycle(value) {
      if (value === '月') {
        this.cyclesing = 0;
      } else if (value === '季') {
        this.cyclesing = 1;
      } else if (value === '半年') {
        this.cyclesing = 2;
      } else if (value === '年') {
        this.cyclesing = 3;
      }
    },

    // 批量删除
    handleDelAll() {
      console.log('批量删除', this.rowSelection.selectedRowKeys);
    },
  },
};
</script>

<style lang="less" scoped>
@import './index.less';
</style>
